<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="home-aside" width="250px">
      <!-- logo -->
      <div class="home-logo-div">
        <router-link to="/customer/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <!-- 折叠icon -->
      <el-icon
        class="toggle-button"
        v-model="isCollapse"
        @click="toggleCollapse"
        size="20px"
      >
        <Fold v-if="!isCollapse" />
        <Expand v-if="isCollapse" />
      </el-icon>
      <!-- 侧边栏菜单 -->
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        active-text-color="#E3A566"
      >
        <el-menu-item index="/customer/food">
          <el-icon><Search /></el-icon>
          <span slot="title">菜品列表</span>
        </el-menu-item>
        <el-menu-item index="/customer/recommend">
          <el-icon><MagicStick /></el-icon>
          <span slot="title">猜你想吃</span>
        </el-menu-item>
        <el-menu-item index="/customer/order">
          <el-icon><Wallet /></el-icon>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/customer/account">
          <el-icon><User /></el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-image src="../src/assets/plate.png" class="plate-div"></el-image>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="fooddetail-header" height="40px">
        <div class="ball"></div>
        <div class="food-line"></div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/customer/home' }"> 主页 </el-breadcrumb-item>
          <el-breadcrumb-item>猜你想吃</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <!-- 主体 -->
      <el-main class="home-main">
        <!-- 菜品推荐列表 -->
        <el-scrollbar height="590px">
          <el-row :gutter="20">
            <el-col
              v-for="foodEntity in foodList"
              :key="foodEntity.id"
              :span="6"
              style="margin-bottom: 20px"
            >
              <!-- 每个食物卡片 -->
              <el-card :body-style="{ padding: '0px' }" class="recommend-card">
                <el-image
                  class="food-image"
                  :src="foodEntity.photo"
                  fit="cover"
                  @click.native="gotoFoodDetail(foodEntity.id)"
                >
                </el-image>
                <div style="padding: 0px 14px 10px; text-align: left">
                  <span style="font-size: 20px">{{ foodEntity.foodName }}</span
                  ><br />
                  <span>￥ {{ foodEntity.price }}</span>
                  <span>&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                  <span
                    ><svg
                      t="1700284969270"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4261"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                        p-id="4262"
                        fill="#d81e06"
                      ></path>
                    </svg>
                    {{ foodEntity.saleNumber }}</span
                  >
                  <span
                    ><el-rate
                      v-model="foodEntity.foodScore"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value} 分"
                  /></span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-main>
      <!-- 回到顶部 -->
      <el-backtop :right="80" :bottom="100" />
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: false, //是否折叠侧边栏
      foodList: [],
      account: {},
    };
  },
  created() {
    let loading = this.$loading({
      text: "正在为您推荐中", // 显示文本
      spinner: "el-icon-loading", // 显示的 icon
      spinnerColor: "#E3A566",
      textColor: "#E3A566",
      // background: "rgba(0, 0, 0, 0.2)", // loading 遮罩层颜色
      target: document.querySelector(".el-main"), // 挂载的 DOM 元素
    });
    this.account = JSON.parse(this.$store.state.account);
    let url = "/like/" + this.account.id;
    let _this = this;
    this.$http.get(url).then(function (response) {
      _this.foodList = response.data;
      console.log(response.data);
      for (let i = 0; i < response.data.length; i++) {
        _this.foodList[i].photo = "http://localhost:8080" + _this.foodList[i].photo;
        _this.foodList[i].foodNumber = 0;
      }
      console.log(_this.foodList);
      loading.close();
    });
  },
  methods: {
    // 切换侧边栏的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    //查看食物详情
    gotoFoodDetail(id) {
      let _this = this;
      _this.$router.push({
        path: "/customer/fooddetail",
        state: {
          foodID: id,
          lastpage: "/customer/recommend",
        },
      });
    },
  },
};
</script>

<style>
.recommend-card {
  height: 310px;
  line-height: 30px;
}
.recommend-card:hover {
  transform: translateY(-3px);
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
}
</style>
